<template>
  <div class="shareDetail">
    <!-- 头部 -->
    <div class="head">
      <i class="iconfont iconbtn_nav_back" @click="$router.go(-1)"></i>
    </div>
    <!-- title -->
    <div class="detail_title">
      <h3>{{ details.title }}</h3>
    </div>
    <!-- author -->
    <div class="author">
      <img :src="details.author && date + details.author.avatar" alt="" />
      <div class="user">
        <span class="name">{{
          details.author && details.author.nickname
        }}</span>
        <span class="time">{{ details.updated_at | formaTime }}</span>
      </div>
    </div>
    <!-- content -->
    <div class="content" v-html="details.content"></div>
    <!-- comment -->
    <div class="comment">
      <div class="com_title">
        评论
        <span>87</span>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <commentItem
          v-for="item in list"
          :key="item.id"
          :item="item"
          @showCommentitem="showCommentitem"
          ref="pinglun"
        ></commentItem>
      </van-list>
    </div>
    <!-- 底部回复盒子 -->
    <div class="btm_box">
      <div
        class="input"
        @click="showComment"
      >
        我来补充两局
      </div>
      <div class="xing" :class="getClass" @click="collect">
        <i
          class="iconfont iconbtn_shoucang_nor"
          :class="{ actived: collectArticles.includes(id) }"
        ></i>
        <span>{{ collectact }}</span>
      </div>
      <div class="zan" @click="star" :class="getZan">
        <i
          class="iconfont iconbtn_dianzan_small_nor"
          :class="{ actived: starArticles.includes(id) }"
        ></i>
        <span>{{ staract }}</span>
      </div>
      <div class="share" @click="shareArticle">
        <i class="iconfont iconbtn_share"></i>
        <span>{{ details.share }}</span>
      </div>
    </div>
    <!-- 回复弹出框 -->
    <van-popup v-model="show" position="bottom" class="btm_popup">
      <van-field
        autosize
        autofocus
        rows="4"
        type="textarea"
        v-model.trim="inputVal"
        maxlength="80"
        placeholder="我来补充两句"
      />
      <span class="send" @click="send">发送</span>
    </van-popup>
    <sharePop v-model="showShare" :details="details"></sharePop>
  </div>
</template>

<script>
//  文章详情  评论  发表文章评论
import {
  articlesShareDetail,
  articleComments,
  publishComment,
  starArticle,
  collectArticle,
  shareImg
} from '@/api/api.js'
import { mapMutations, mapGetters } from 'vuex'
import commentItem from './commentItem'
// 时间处理
import moment from 'moment'
import sharePop from './sharePop'
export default {
  data () {
    return {
      // 控制 弹出框
      show: false,
      showShare: false,
      // 输入框内容
      inputVal: '',
      // 文章 id
      id: this.$route.params.id,
      commentId: null,
      // 文章详情
      details: {},
      date: process.env.VUE_APP_URL,
      // 评论
      limit: 5,
      start: 0,
      total: 0,
      loading: false,
      finished: false,
      list: [],
      collectact: 0,
      staract: 0,
      // 详情
      detail: {
        star: 0,
        collect: 0
      }
    }
  },
  computed: {
    ...mapGetters(['starArticles', 'collectArticles']),
    getClass () {
      return this.collectArticles.includes(+this.id) ? 'actived' : ''
    },
    getZan () {
      return this.starArticles.includes(+this.id) ? 'actived' : ''
    }
  },
  methods: {
    // 添加回复
    addhuifu () {},
    // 点赞文章&点赞评论
    ...mapMutations([
      'SETSTARARTICLES',
      'SETSTARARTICLECOMMENTS',
      'SETCOLLECTARTICLES'
    ]),
    // 评论数据
    async onLoad () {
      this.loading = true
      const commentsRes = await articleComments({
        id: this.id,
        limit: this.limit,
        start: this.start
      })
      // 头像
      commentsRes.data.list.forEach(val => {
        if (val.author.avatar) {
          val.author.avatar = process.env.VUE_APP_URL + val.author.avatar
        }
      })
      // 保存数据
      this.list = [...this.list, ...commentsRes.data.list]
      this.total = commentsRes.data.total
      this.start += this.limit
      this.loading = false
      // 判断
      if (this.list.length === this.total) {
        this.finished = true
      }
    },
    // 发表文章评论
    async send () {
      // 判断输入框是否有内容
      if (!this.inputVal) {
        return
      }
      // 提交的数据
      const data = {}
      data.content = this.inputVal
      if (this.$refs.pinglun === 'index') {
        data.article = this.id
        const sendRes = await publishComment(data)
        // 把添加2评论的返回值添加到评论的前面
        // 隐藏输入框
        this.list.unshift(sendRes.data)
      } else {
        data.parent = this.commentId
        const sendRes = await publishComment(data)
        // 回复之后返回的结果
        // this.sendReshui.unshift(sendRes.data)
        this.list.forEach(item => {
          if (item.id === sendRes.data.parent) {
            item.children_comments.unshift(sendRes.data)
          }
        })
      }

      this.show = false
      // 清空输入框
      this.inputVal = ''
    },
    // 回复评论事件
    showComment () {
      this.$refs.pinglun = 'index'
      this.show = true
    },
    // 回复评论事件
    showCommentitem (id) {
      this.show = true
      this.commentId = id
    },
    // 收藏
    async collect () {
      const collectRes = await collectArticle({
        id: this.$route.params.id
      })
      // 修改vuex中的数据
      this.collectact = collectRes.data.num
      this.SETCOLLECTARTICLES(collectRes.data.list)
      if (this.collectArticles.includes(+this.id)) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.fail('已取消收藏')
      }
    },
    // 点赞
    async star () {
      const starRes = await starArticle({
        article: this.$route.params.id
      })
      // 修改vuex中的数据
      this.staract = starRes.data.num
      this.SETSTARARTICLES(starRes.data.list)
      if (this.starArticles.includes(+this.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.fail('已取消点赞')
      }
    },
    // 生成分享文章的图片
    async shareArticle () {
      // 滚到顶部
      window.scrollTo(0, 0)
      this.showShare = true
      const shareRes = await shareImg({ id: this.id })
      this.detail.share = shareRes.data.share
    }
  },
  // 文章详情
  async created () {
    const res = await articlesShareDetail(this.id)
    this.details = res.data
    this.collectact = res.data.collect
    this.staract = res.data.star
  },
  // 时间
  filters: {
    formaTime (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  components: {
    commentItem,
    sharePop
  }
}
</script>

<style lang="less" scoped>
.shareDetail {
  .head {
    position: relative;
    width: 100%;
    height: 46px;
    line-height: 46px;
    padding: 0 10px;
    border-bottom: 1px solid #ebedf0;
    i {
      position: absolute;
      top: 0;
      left: 5px;
      font-size: 46px;
      color: #000;
    }
  }
  .detail_title {
    padding: 0 15px;
    h3 {
      font-size: 18px;
      font-weight: normal;
    }
  }
  .author {
    padding: 0 15px;
    display: flex;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .user {
      margin-left: 15px;
      .name {
        font-size: 14px;
        display: block;
        font-weight: 600;
      }
      .time {
        font-size: 14px;
        display: block;
        color: #b4b4bd;
      }
    }
  }
  .content {
    padding: 15px;
    font-size: 16px;
    color: #181a39;
    background-color: white;
    /deep/ img {
      width: 100%;
      display: block;
    }
  }
  .comment {
    margin-top: 30px;
    padding: 0 15px;
    height: 300px;
    .com_title {
      font-size: 18px;
      font-weight: 700;
      position: relative;
      span {
        position: absolute;
        top: 0;
        left: 40px;
        font-size: 10px;
      }
    }
  }
  .btm_box {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 75px;
    display: flex;
    box-sizing: border-box;
    padding: 10px 15px 0;
    background-color: white;
    width: 100%;
    justify-content: space-between;
    box-shadow: 0px -6px 8px 0px rgba(24, 26, 57, 0.04);
    display: flex;
    .input {
      height: 34px;
      background: #f7f4f5;
      border-radius: 4px;
      flex: 1;
      font-size: 14px;
      margin-top: 10px;
      color: #b4b4bd;
      margin-right: 24px;
      line-height: 34px;
      padding-left: 6px;
    }
    div:not(.input) {
      font-size: 13px;
      color: #b4b4bd;
      i {
        display: block;
        font-size: 30px;
      }
    }
    .xing {
      margin-right: 24px;
      text-align: center;
      &.actived {
        color: red;
      }
    }
    .zan {
      margin-right: 24px;
      text-align: center;
      &.actived {
        color: red;
      }
    }
    .share {
      width: 50px;
      i {
        display: block;
        text-align: center;
        font-size: 30px;
        color: #b4b4bd;
      }
      span {
        display: block;
        text-align: center;
        font-size: 13px;
        color: #b4b4bd;
      }
    }
  }
  .btm_popup {
    padding: 10px 10px 0 10px;
    overflow: hidden;
    .send {
      display: block;
      text-align: center;
      margin-top: 10px;
      background-color: skyblue;
      font-size: 24px;
      color: #222;
      border-radius: 5px;
    }
  }
  /deep/.van-popup--bottom {
    height: 150px;
    border-radius: 10px 10px 0 0;
  }
  .van-field {
    background-color: #f7f4f5;
    height: 100px;
  }
}
</style>
